<template>
  <el-dialog
      v-model="dialogVisible"
      title="确认保存"
      width="800px"
      :before-close="handleClose"
      class="SalesSaveConfirm"
  >
    <el-alert
        title="请再次检查销售信息是否正确，确认后将保存本次销售记录。"
        type="warning"
        :closable="false"
        class="SalesSaveConfirm-alert"
    />
    <el-form label-width="120px" :model="info" class="SalesSaveConfirm-form">
      <el-row :gutter="16">
        <el-col :span="12">
          <el-form-item label="订单编号">
            <el-input :model-value="info?.orderNo || '-'" disabled class="SalesSaveConfirm-form-input"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="客户">
            <el-input :model-value="info?.customerName || '-'" disabled class="SalesSaveConfirm-form-input"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="16">
        <el-col :span="12">
          <el-form-item label="下单日期">
            <el-input :model-value="info?.orderDate || '-'" disabled class="SalesSaveConfirm-form-input"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="备注">
            <el-input :model-value="info?.note || '-'" disabled class="SalesSaveConfirm-form-input"/>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-table :data="items || []" class="SalesSaveConfirm-table" border stripe>
      <el-table-column type="index" width="60" label="序号" align="center"/>
      <el-table-column prop="code" label="商品编码" min-width="120" align="center"/>
      <el-table-column prop="name" label="商品名称" min-width="160" align="center"/>
      <el-table-column prop="unit" label="单位" width="100" align="center"/>
      <el-table-column prop="quantity" label="数量" width="120" align="center"/>
      <el-table-column prop="unitPrice" label="单价(¥)" width="120" align="center">
        <template #default="{row}">{{ formatMoney(row.unitPrice) }}</template>
      </el-table-column>
      <el-table-column prop="totalPrice" label="小计(¥)" width="140" align="center">
        <template #default="{row}">{{ formatMoney(row.totalPrice) }}</template>
      </el-table-column>
    </el-table>
    <div class="SalesSaveConfirm-summary">
      <div class="SalesSaveConfirm-summary-row">
        <div class="SalesSaveConfirm-summary-label">合计金额：</div>
        <div class="SalesSaveConfirm-summary-value">¥ {{ formatMoney(info?.totalAmount) }}</div>
      </div>
    </div>
    <template #footer>
      <div class="SalesSaveConfirm-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleConfirm">确认保存</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup>
import {ref, watch} from 'vue'

const props = defineProps({
  visible: {type: Boolean, default: false},
  info: {type: Object, default: null},
  items: {type: Array, default: () => []}
})
const emits = defineEmits(['update:visible', 'confirm'])
const dialogVisible = ref(false)
watch(() => props.visible, v => dialogVisible.value = v)
watch(dialogVisible, v => {
  if (!v) emits('update:visible', false)
})
const handleClose = () => dialogVisible.value = false
const handleConfirm = () => emits('confirm', {info: props.info, items: props.items})
const formatMoney = v => Number(v || 0).toFixed(2)
</script>
<style scoped lang="scss">
.SalesSaveConfirm {
  &-alert {
    margin-bottom: 16px;
  }

  &-form {
    padding: 16px 0;

    &-input {
      width: 100%;
    }
  }

  &-table {
    width: 100%;
  }

  &-summary {
    display: flex;
    justify-content: flex-end;
    padding: 16px 0;

    &-row {
      display: flex;
      gap: 8px;
      align-items: center;
    }

    &-label {
      font-size: 14px;
      color: #606266;
    }

    &-value {
      font-size: 16px;
      font-weight: 600;
      color: #303133;
    }
  }

  &-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
  }
}
</style>
